<template>
    <view class="normal-login-container">
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view class="main-body-login">
            <view class="blur-overlay"></view>
            <view class="content-body" style="width: 100%;height: 100%">
                <view class="title-h3 font-style-normal">聊天助手注册页面</view>
                <view style="margin-top: 20upx">
                    <uni-forms ref="baseForm" :modelValue="registerForm" label-position="top" :rules="rules">
                        <uni-forms-item label="账号" required name="username">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">账号</view>
                            </template>
                            <uni-easyinput v-model="registerForm.username" placeholder="请输入账号"/>
                        </uni-forms-item>
                        <uni-forms-item label="密码" required name="password">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">密码</view>
                            </template>
                            <uni-easyinput v-model="registerForm.password" placeholder="请输入密码"/>
                        </uni-forms-item>
                        <uni-forms-item label="确认密码" required name="password">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">确认密码</view>
                            </template>
                            <uni-easyinput v-model="registerForm.confirmPassword" placeholder="请输入确认密码"/>
                        </uni-forms-item>
                        <uni-forms-item label="验证码" required name="code">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">验证码</view>
                            </template>
                            <view style="display: flex;align-items: center">
                                <uni-easyinput v-model="registerForm.code" placeholder="请输入验证码" type="number"/>
                                <view class="button-get-code"
                                      @click="getCode">
                                    <view class="login-code">
                                        <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
                                    </view>
                                </view>
                            </view>
                        </uni-forms-item>
                    </uni-forms>
                </view>

                <view class="btn-yonghu font-style-normal" @click="handleRegister" style="letter-spacing: 4upx">
                    注册
                </view>

                <view class="xieyi text-center" style="margin-top: 40upx;">
                    <text @click="handleUserLogin" class="text-blue1"
                    style="letter-spacing: 4upx">使用已有账号登录？</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {getCodeImg, register} from '@/api/login'

export default {
    data() {
        return {
            codeUrl: "",
            captchaEnabled: true,
            globalConfig: getApp().globalData.config,
            rules: {
                username: {
                    rules: [{
                        required: true,
                        errorMessage: '账号不能为空'
                    }]
                },
                password: {
                    rules: [{
                        required: true,
                        errorMessage: '密码不能为空'
                    }]
                },
                confirmPassword: {
                    rules: [{
                        required: true,
                        errorMessage: '确认密码不能为空'
                    }]
                },
                code: {
                    rules: [{
                        required: true,
                        errorMessage: '验证码不能为空'
                    }]
                }
            },
            registerForm: {
                username: "",
                password: "",
                confirmPassword: "",
                code: "",
                uuid: ""
            }
        }
    },
    created() {
        this.getCode()
    },
    methods: {
        // 用户登录
        handleUserLogin() {
            this.$tab.navigateTo(`/pages/login`)
        },
        // 获取图形验证码
        getCode() {
            getCodeImg().then(res => {
                this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
                if (this.captchaEnabled) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.registerForm.uuid = res.uuid
                }
            })
        },
        // 注册方法
        async handleRegister() {
            if (this.registerForm.username === "") {
                this.$modal.msgError("请输入您的账号")
            } else if (this.registerForm.password === "") {
                this.$modal.msgError("请输入您的密码")
            } else if (this.registerForm.confirmPassword === "") {
                this.$modal.msgError("请再次输入您的密码")
            } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
                this.$modal.msgError("两次输入的密码不一致")
            } else if (this.registerForm.code === "" && this.captchaEnabled) {
                this.$modal.msgError("请输入验证码")
            } else {
                this.$modal.loading("注册中，请耐心等待...")
                this.register()
            }
        },
        // 用户注册
        async register() {
            register(this.registerForm).then(res => {
                this.$modal.closeLoading()
                uni.showModal({
                    title: "系统提示",
                    content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
                    success: function (res) {
                        if (res.confirm) {
                            uni.redirectTo({url: `/pages/login`});
                        }
                    }
                })
            }).catch(() => {
                if (this.captchaEnabled) {
                    this.getCode()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  height: 100vh;
  background: rgb(63, 118, 252);
  overflow-y: auto;

  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }


}

.main-body-login {
  width: 100%;
  height: 100%;
  background: url("@/static/images/bg-login.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;

  .blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1); /* 背景透明度为 50% */
  }

  .content-body {
    position: relative;
    z-index: 1;
    padding: 40upx 40upx 0 40upx;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title-h3 {
      color: #fff;
      font-weight: 800;
      font-size: 48upx;
      letter-spacing: 10upx;
      text-align: center;
    }

    .desp-content {
      font-weight: 500;
      font-size: 40upx;
      color: #ECECEC;
      letter-spacing: 10upx;
    }

    .minor-font-size {
      //margin-top: 476upx;
      text-align: center;
      font-weight: 500;
      font-size: 24upx;
      color: #EFEFEF;
    }

    .btn-yonghu {
      width: 100%;
      height: 116upx;
      text-align: center;
      line-height: 116upx;
      background: url("@/static/images/btn-login.png") no-repeat;
      background-size: 100%;
      color: #4376FC;
      font-size: 32upx;
      font-weight: 800;
    }
  }

}

.button-get-code {
  height: 70upx;
  line-height: 70upx;
  text-align: center;
  color: #4376FC;
  font-size: 24upx;
  font-weight: 800;
  padding: 0 20upx;
  border-radius: 10upx;

  .login-code {
    height: 70upx;

    .login-code-img {
      height: 70upx;
      width: 200rpx;
    }
  }
}
</style>
